<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>选择优惠券</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />

	<style type="text/css">
		/* .couponwraper>div {
			width: 17.95rem;
			height: 4.3rem;
			margin-bottom: 0.5rem;
			display: flex;
		}

		.coupon_left {
			width: 11.85rem;
			height: 100%;
			border-top-left-radius: 0.4rem;
			border-bottom-left-radius: 0.4rem;
			border-top-right-radius: 0.4rem;
			border-bottom-right-radius: 0.4rem;
			position: relative;
		}

		.border_left {
			width: 0.25rem;
			height: 100%;
			border-top-left-radius: 0.4rem;
			border-bottom-left-radius: 0.4rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			position: absolute;
			left: 0;
		}

		.coupon_right {
			width: 6.05rem;
			height: 100%;
			border-top-left-radius: 0.4rem;
			border-bottom-left-radius: 0.4rem;
			border-top-right-radius: 0.4rem;
			border-bottom-right-radius: 0.4rem;
			background: #ffffff;
		}

		.btn_use {
			width: 4rem;
			height: 1.5rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 0.78rem;
			height: 1.5rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 0.78rem;
			line-height: 1.5rem;
			text-align: center;
			font-size: 0.7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		} */

		.wrapper {
			padding: 0.1rem
		}

		.item-wraper {
			width: 3.58rem;
			height: 1.28rem;
			background-size: cover;
			position: relative;
		}

		.item-wraper .item-left {
			position: absolute;
			left: 0.13rem;
			top: 0.38rem;
		}

		.item-wraper .item-left .left-top {
			margin-bottom: 0.09rem;
			text-align: center;
		}

		.item-wraper .item-left .left-top .money-icon {
			font-size: 0.14rem;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.14rem;
		}

		.item-wraper .item-left .left-top .money {
			font-size: 0.25rem;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.25rem;
		}

		.item-wraper .item-left .left-bottom {
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 0.12rem;
			text-align: center;
			margin: auto;
		}

		.item-wraper .item-left .left-bottom span {
			display: inline-block;
			text-align: center;
		}

		.item-wraper .item-right {
			position: absolute;
			left: 1.1rem;
			top: 0.43rem;
		}

		.item-wraper .item-right .right-top {
			font-size: 0.18rem;
			font-weight: 400;
			color: rgba(46, 46, 46, 1);
			line-height: 0.18rem;
			margin-bottom: 0.11rem;
		}

		.item-wraper .item-right .right-bottom {
			display: flex;
			align-items: center;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(127, 127, 127, 1);
			line-height: 0.12rem;
		}

		.item-wraper .item-right .right-bottom img {
			margin-left: 0.33rem;
			width: 0.16rem;
			height: 0.16rem;
		}

		.use-btn {
			position: absolute;
			right: 0.19rem;
			top: 0.16rem;
			display: inline-block;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(0, 90, 147, 1);
			line-height: 0.12rem;
			padding: 0.05rem 0.1rem;
			background: rgba(227, 244, 255, 1);
			border-radius: 0.11rem;
			border: 1px solid rgba(0, 90, 147, 1);
			z-index: 999999
		}

		.overdue-btn {
			position: absolute;
			right: 0.19rem;
			top: 0.16rem;
			display: inline-block;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(89, 89, 89, 1);
			line-height: 0.12rem;
			padding: 0.05rem 0.1rem;
			background: rgba(240, 241, 242, 1);
			border-radius: 0.11rem;
			border: 1px solid rgba(89, 89, 89, 1);
		}

		.aui-text-center {
			text-align: center !important;
		}

		.title {
			width: 75px;
			height: 25px;
			font-size: 25px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			/*line-height: 25px;*/
			text-align: center;
			vertical-align: center;
		}
	</style>
</head>

<body>
	<div id="app">
		<!-- <div class="couponwraper" v-for="vo in info">
			<div class="" v-if="vo.status_name=='未使用'"> -->
		<!--未使用的优惠券  -->
		<!-- <div class="coupon_left" style="background: rgba(255, 255, 255, 1);"> -->
		<!-- 左边框 -->
		<!-- <div class="border_left"> -->

		<!-- </div>
					<div class="" style="height:3.5rem;display:flex;align-items:center;margin-left:1.05rem;border-right:1px dashed #EDEDF0;margin-top:0.4rem;"> -->
		<!-- 中间包邮字样 -->
		<!-- <div class="" style="font-size:1.1rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(114,213,239,1);margin-right:1.2rem;">
							{{vo.coupon_type}}
						</div> -->
		<!-- 优惠券信息 -->
		<!-- <div class="">
							<div style="font-size:0.7rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(51,51,51,1);line-height:1rem;margin-bottom:0.2rem;">{{vo.name}}</div>
							<div style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:#9399A5;line-height:0.85rem;">{{vo.start_time}}-{{vo.end_time}}</div>
						</div>

					</div>

				</div>

				<div class="coupon_right" style="display:flex;justify-content:center;align-items:center">
					<div class="btn_use" tapmode @click="coupon_choice(vo)" style="">
						去使用
					</div>
				</div>
			</div>


		</div> -->

		<div class="wrapper">
			<div class="item-wraper" v-if="vo.coupon_temp_id==2 || vo.full_money<=money" v-for="vo in info" style="background:url(../../image/icons/coupon-bc.png);background-size: cover;background-repeat: no-repeat;" v-if="vo.status_name=='未使用'">
				<div class="" @click="coupon_choice(vo)">

					<div class="item-left" v-if="vo.coupon_temp_id==2">
						<div class="title">
							<!-- <span class="money-icon">￥</span> -->
							<span class="title" v-text="vo.coupon_type"></span>
						</div>
						<div class="left-bottom">
							<!-- <span>满¥{{vo.full_money}}可用</span> -->
						</div>
					</div>
					<div class="item-left" v-else>
						<div class="left-top">
							<span class="money-icon">￥</span>
							<span class="money">{{price_format('yuan',vo.money)}}.{{price_format('fen',vo.money)}}</span>
						</div>
						<div class="left-bottom">
							<span>满￥{{price_format('yuan',vo.full_money)}}.{{price_format('fen',vo.full_money)}}可用</span>
						</div>
					</div>
					<div class="item-right">
						<div class="right-top" v-text="vo.name"></div>
						<div class="right-bottom">
							<div>有效期 {{vo.start_time}}-{{vo.end_time}}</div>
							<!-- <img @click="choose(index,vo.id)" v-if="vo.status_name == '未使用'" :src="choose_num == index ? circle_active : circle_null" alt /> -->
						</div>
					</div>

					<!-- <div class="overdue-btn" v-if="vo.status_name == '已过期'">已过期</div> -->
					<div class="use-btn">去使用</div>
				</div>

			</div>

			<div v-if="info.length<1" class="aui-text-center" style="margin-top: 40%;">
				<img src="../../image/bg/bg-nomessage.png" style="width:1.51rem;margin-left:50%;transform:translateX(-50%);margin-bottom:0.27rem" />
				<div class="aui-font-size-16 ming-text-hui6 aui-margin-t-10" style="font-size:0.15rem;font-family:PingFangSC-Regular;font-weight:400;;color:#B3B3B3;">
					暂无优惠券
				</div>
			</div>

		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			money: 0,
			info: [],
			coupon: "../../image/icons/coupon-bc.png",
			overdue: "../../image/icons/overdue-bc.png",
			circle_null: "../../image/icons/circle_null.png",
			circle_active: "../../image/icons/circle_active.png",
			current: 0
		},
		methods: {

			price_format: function(type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			},
		get_list: function() {
			get_data('api/Coupon/choiceCouponList', {
				token: $api.getStorage('token'),
				money: vm.money
			}, function(ret) {
				// alert(JSON.stringify(ret))
				if (ret.status) {
					vm.info = ret.data
				}
			})
		},
		coupon_choice: function(el) {
			send_event('coupon_choice', {
				coupon_id: el.id,
				money: el.money
					// coupon_type: el.coupon_type
			})
			delay_close()
		}
	}
	})
	apiready = function() {
		vm.money = api.pageParam.money/100
		vm.get_list()
			// 新版刷新
		refresh_new(function() {
			setTimeout(function() {
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
	};
</script>

</html>
